<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>梅赛德斯-奔驰</title>
	<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="${pageContext.request.contextPath}/css/animation.css" rel="stylesheet" type="text/css" media="all" />
	<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
</head>

<body>



	<div class="kxz">
		<div class="header">
			<div class="logo"></div>
			<ul>
				<li><a href="login/benchi1.action" id="a1">车型</a></li>
				<li><a href="login/benchi2.action" id="a2">购车指南</a></li>
				<li><a href="login/benchi3.action" id="a3">客户服务</a></li>
				<li><a href="login/benchi4.action" id="a4">Mercedes me</a></li>
				<li><a href="login/benchi5.action" id="a5">梅赛德斯-奔驰</a></li>
			</ul>
			<div class="uu">
 				用户：${USER_SESSION.user_name}<br>
				<a href="${pageContext.request.contextPath }/logout.action">退出登录</a>
			</div>
		</div>

	</div>
	<div class="content">
		<div class="banner" id="bigad">
			<a href="#" class="a"><img src="${pageContext.request.contextPath}/images/tp1.jpg" style="width:100%;height:auto;"></a>
		</div>
		<div class="chexing">
			<hr>
			<br>
			<span>全部车型</span>
			<br>
			<br>
			<hr>
		</div>
		<div class="fourd">
			<div class="one" onmouseover=this.style.opacity=0 onmouseout=this.style.opacity=0.5>
				<span>轿车</span>
			</div>
			<div class="two" onmouseover=this.style.opacity=0 onmouseout=this.style.opacity=0.5>
				<span>SUV</span>
			</div>
			<div class="three" onmouseover=this.style.opacity=0 onmouseout=this.style.opacity=0.5>
				<span>跑车</span>
			</div>
			<div class="four" onmouseover=this.style.opacity=0 onmouseout=this.style.opacity=0.5>
				<span>MPV</span>
			</div>
		</div>

		<div class="smpic">
			<div class="smpic1" ><img src="${pageContext.request.contextPath}/images/smpic1.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic2.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic3.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic4.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic5.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic6.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic7.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic8.png" alt="..."></div>
			<div class="smpic1"><img src="${pageContext.request.contextPath}/images/smpic9.png" alt="..."></div>
		</div>
			
			  
			

		 
			

	</div>

	<div class="footer"></div>
	<div class="right_slide">
		<ul>
			<li class="li1" id="li1"></li>
			<li class="li2" id="li2"></li>
		</ul>
	</div>
	</div>
	<script type="text/javascript">
		var i = 1;
		var t;
		var img = document.getElementsByTagName("img");
		var kxz = document.getElementById("kxz");
		var div = document.getElementById("bigad");
		var li1 = document.getElementById("li1");
		var li2 = document.getElementById("li2");
		var yuyue = document.getElementById("yuyue");
		var yuyue2 = document.getElementById("yuyue2");
		var a1 = document.getElementById("a1");
		var a2 = document.getElementById("a2");
		var a3 = document.getElementById("a3");
		var a4 = document.getElementById("a4");
		var a5 = document.getElementById("a5");
		var t2;

		window.onload = function () {
			var fullWindowWidth = window.innerWidth;
			console.log(fullWindowWidth);
		}

		bigad.onmouseleave = function () {
			t = setInterval(change, 2000);
		}
		bigad.onmouseenter = function () {
			clearInterval(t);
		}
		function change() {
			i++;
			img[0].src = "${pageContext.request.contextPath}/images/tp" + i + ".jpg";
			if (i == 6) {
				i = 1;
			};
		}
		li1.onclick = function () {
			alert("请电联18833005703");
		}
		li2.onclick = function () {
			t2 = setInterval(scroll, 10);
		}

		function scroll() {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop > 0) {
				document.documentElement.scrollTop -= 100;
				console.log(scrollTop)
			} else {
				clearInterval(t2);
			}
		}


		yuyue.onmouseenter = function () {
			this.style.backgroundColor = "rgb(238, 198, 170)"
		}
		yuyue.onmouseleave = function () {
			this.style.backgroundColor = "gray"
		}
		yuyue2.onmouseenter = function () {
			this.style.backgroundColor = "rgb(238, 198, 170)"
		}
		yuyue2.onmouseleave = function () {
			this.style.backgroundColor = "gray"
		}

		a1.onmouseenter = function () {
			this.style.color = 'skyblue'
		}
		a2.onmouseenter = function () {
			this.style.color = 'skyblue'
		}
		a3.onmouseenter = function () {
			this.style.color = 'skyblue'
		}
		a4.onmouseenter = function () {
			this.style.color = 'skyblue'
		}
		a5.onmouseenter = function () {
			this.style.color = 'skyblue'
		}

		a1.onmouseout = function () {
			this.style.color = 'white'
		}
		a2.onmouseout = function () {
			this.style.color = 'white'
		}
		a3.onmouseout = function () {
			this.style.color = 'white'
		}
		a4.onmouseout = function () {
			this.style.color = 'white'
		}
		a5.onmouseout = function () {
			this.style.color = 'white'
		}





	</script>
</body>

</html>